
<script setup>
import {
    Edit,
    Delete,
    Refresh
} from '@element-plus/icons-vue'
import { ref } from 'vue';
import { ElMessage,ElPagination } from 'element-plus';
const teacherData = ref([
    {
        id: 1,
        account: '',
        userName: '',
        role: '',
        total: '',
    }
]) 

const searchForm = ref({
        account: '',
        userName: '',
        role: '',
});

const page = ref({
    pageNum: 1, //当前页
    pageSize: 5, //每页条数
})

const editedRow = ref({})

const visibleDrawer = ref(false)

import { teacherListService ,teacherSearchService,teacherAddService,teacherDeleteService,resetPasswordService,teacherUpdateService} from '@/api/admin.js'

const searchTeacher =async ()=>{
    let params = {
        pageNum: page.value.pageNum,
        pageSize: page.value.pageSize,
    }
    

    const examSearch = {
        account: searchForm.value.account,
        userName: searchForm.value.userName,
        role: searchForm.value.role,
    };
    try {
        let result = await teacherSearchService(examSearch, params);
        teacherData.value = result.data.list.map(item => ({
            id: item.id,
            account: item.account,
            userName: item.userName,
            role: item.role,
        }));
        teacherData.value.total = result.data.total;
    } catch (error) {
        console.error('Error in teacher list request:', error);
    }

};

const addTeacher = () => {
    const { account, userName, role } = searchForm.value;

    // 如果三个字段都为空，直接返回
    if (!account && !userName && !role) {
        return;
    }

    const teacherAdd = {
        account: account,
        userName: userName,
        role: role,
    };

    // 调用后端接口新增教师信息
    teacherAddService(teacherAdd)
        .then(() => {
            ElMessage.success('新增教师成功');
            teacherList(); // 刷新教师列表
        })
        .catch(() => {
            ElMessage.error('新增教师失败');
        });
};


const teacherList = async () => {
    let params = {
        pageNum: page.value.pageNum,
        pageSize: page.value.pageSize,
    }
    try{  
    let result = await teacherListService(params);
    teacherData.value = result.data.list.map(item => ({
    id: item.id,
    account: item.account,  // 映射 account
    userName: item.userName,  // 映射 userName
    role: item.role,  // 映射 role
}));
teacherData.value.total=result.data.total;     
    }catch(error){
        console.error('Error in teacher list request:', error);
    }
}





const deleteTeacher = (id) => {
    teacherDeleteService(id)
    .then(() => {
      ElMessage.success('删除教师成功');
      teacherList();
    })
    .catch(() => {
      ElMessage.error('删除教师失败');
    });
};

const resetPassword = (id)=>{
    resetPasswordService(id)
    .then(() => {
      ElMessage.success('重置教师密码成功');
      teacherList();
    })
    .catch(() => {
      ElMessage.error('重置教师密码失败');
    });
}



const handleRowClick = (row) => {
    editedRow.value = { ...row }; // 将行数据赋值给 currentExam
  visibleDrawer.value = true; // 显示抽屉
};

const updateTeacher=()=>{
        const params = {
            id: editedRow.value.id,
            userName: editedRow.value.userName,
            role: String(editedRow.value.role),
    }
  
    teacherUpdateService(params)
    .then(() => {
      ElMessage.success('更新教师信息成功');
      visibleDrawer.value = false;
      teacherList();
    })
    .catch(() => {
      ElMessage.error('更新教师信息失败');
    });

}
teacherList()

</script>






<template>
    <el-card class="page-container">
        <template #header>
            <div class="header">
                <span>所有教师</span>
            </div>
        </template>

        <!-- 根据考试名称查询某场考试or新增考试信息 -->
        <el-form :model="searchForm" inline style="margin-bottom: 20px">
            <el-form-item label="工号">
                <el-input v-model="searchForm.account" placeholder="请输入工号" clearable />
            </el-form-item>
            <el-form-item label="姓名">
                <el-input v-model="searchForm.userName" placeholder="请输入姓名" clearable />
            </el-form-item>
            <el-form-item label="管理">
                <el-select v-model="searchForm.role" placeholder="请选择管理权限" clearable>
                    <el-option label="是" value="1" />
                    <el-option label="否" value="0" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="searchTeacher">查询</el-button>
                <el-button type="success" icon="Plus" @click="addTeacher">新增教师</el-button>
            </el-form-item>
        </el-form>

        <!-- 考试列表 -->
        <el-table :data="teacherData" style="width: 100%" >
            <el-table-column label="工号">
                <template #default="{ row }">{{ row.account }}</template>
            </el-table-column>
            <el-table-column label="姓名">
            <template #default="{ row }">
                {{ row.userName }}
            </template>
            </el-table-column>
            <el-table-column label="管理">
                <template #default="{ row }">
                    {{ row.role == 1 ? '是' : '否' }}
                </template>
            </el-table-column>
            <el-table-column label="修改">
                <template #default="{ row }">
                    <el-button :icon="Edit" circle plain type="primary" @click="handleRowClick(row)"></el-button>
                </template>
            </el-table-column>
            <el-table-column label="删除教师">
                <template #default="{ row }">
                    <el-button :icon="Delete" circle plain type="danger" @click="deleteTeacher(row.id)"></el-button>
                </template>
            </el-table-column>
            <el-table-column label="重置密码">
                <template #default="{ row }">
                    <el-button :icon="Refresh" circle plain type="warning" @click="resetPassword(row.id)"></el-button>
                </template>
            </el-table-column>
            <template #empty>
                <el-empty description="没有教师数据" />
            </template>
        </el-table>
        <div class="pagination-container">
            <el-pagination
                background
                layout="total, prev, pager, next, jumper"
                :total="teacherData.total"
                :page-size.sync="page.pageSize"
                :current-page.sync="page.pageNum"
                @current-change="onCurrentChange"
            />
            <span class="fixed-size-info">每页5条</span>
        </div>

        <el-drawer v-model="visibleDrawer" title="编辑教师信息" direction="rtl" size="30%">
           
            <el-form :model="editedRow" label-width="100px">
                
                <el-form-item label="姓名" >
                    <el-input v-model="editedRow.userName"  clearable />
                </el-form-item>

                <el-form-item label="管理">
                    <el-radio-group v-model="editedRow.role">
                        <el-radio :label="1">是</el-radio>
                        <el-radio :label="0">否</el-radio>
                    </el-radio-group>
                 </el-form-item>

                <el-form-item>
                    <el-button type="primary" @click="updateTeacher">确认修改</el-button>
                </el-form-item>
            </el-form>
        </el-drawer>
    </el-card>
</template>

<style lang="scss" scoped>
.page-container {
    min-height: 100%;
    box-sizing: border-box;

    .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .el-form-item {
        margin-bottom: 10px;
    }

    .status-blue {
        color: rgb(26, 154, 214);
    }

    .status-green {
        color: rgb(26, 223, 118);
    }

    .status-red {
        color: rgb(234, 15, 15);
    }
    .pagination-container {
    margin-top: 20px;
    display: flex;
    justify-content: center;  /* 居中对齐 */
    align-items: center;      /* 垂直居中对齐 */
}

.fixed-size-info {
    margin-left: 16px;
    font-size: 14px;
    color: #606266; 
    display: inline-block;  /* 确保它和分页控件在同一行 */
}
}
</style>